<script setup>

import {ArrowDown} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import UserInfo from "@/views/system/user/profile/userInfo.vue";
const router=useRouter()
const a=ref(1)
const handle1=()=>{
   a.value=2;

}

</script>

<template>
  <div class="All">
    <!--头部-->
    <header style="height: 120px;">
      <div class="logo">
        <img src="../assets/logo/logo.jpg" style="width: 100px;height: 100px;margin-top: 30px;">
      </div>
      <div class="jiaoguan" style="margin-right: 300px;">交管对接信息化管理系统</div>
      <nav >
          <el-dropdown >
            <span class="el-dropdown-link">
              我的任务
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/redirect/documentsList')">单据列表</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        <el-dropdown>
            <span class="el-dropdown-link">
              任务通告
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/redirect/messageLook')">消息查看</el-dropdown-item>
              <el-dropdown-item @click="router.push('/redirect/announcementsView')">公告查看</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
            <span class="el-dropdown-link">
              我的审批
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/redirect/donesList')">已办列表</el-dropdown-item>
              <el-dropdown-item @click="router.push('/redirect/donesList')">审批列表</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
            <span class="el-dropdown-link">
              我的汇总
            </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/redirect/donesList')">出勤汇总</el-dropdown-item>
              <el-dropdown-item @click="router.push('/redirect/donesList')">维修汇总</el-dropdown-item>
              <el-dropdown-item @click="router.push('/redirect/donesList')">用餐金额统计</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
<!--        <button @click="()=>{
          router.push('/redirect')
        }">后台</button>-->
      </nav>

    </header>
    <!--头图-->
    <div>
      <img src="../assets/images/banner_01.jpg" style="width: 100%;height: 100%">
    </div>
    <!--  about-->
    <section id="about">
      <div class="container">
        <h2>关于我们</h2>
        <p style="text-indent: 2em;line-height: 30px">智慧交通管理系统（ITS）是城市交通管理的重要组成部分，
          它通过集成先进的信息技术、数据通信传输技术、电子传感技术、
          控制技术等，对城市交通系统进行实时感知、高效分析和智能管理。
          近年来，随着大数据、云计算、物联网、人工智能等新技术的快速发展，
          智慧交通管理系统在提升交通管理效率、改善出行体验、
          保障交通安全等方面发挥了越来越重要的作用</p>
      </div>
    </section>
    <!--news-->
    <section id="news">
      <div class="container">
        <h2>公布公告新闻动态</h2>
        <div class="news-container">
          <article class="news-item">
            <h3>交管资讯</h3>
            <img src="../assets/images/quan.png">
            <div>
              <ul>
                <li>
                  <a href="http://www.zgjt.org/article/8221.html">公安交管8项便民利企改革新措施7月1日顺利实施</a>
                </li>
              </ul>
            </div>
            <p>7月1日起，试点机动车行驶证电子化、摩托车登记“一证通办”、交管业务网上精准导办服务等8项公安交管便民利企改革新措施正式推行。
              改革新措施实施首日，全国公安交管部门共办理涉
            </p>
            <p style="text-align: right;">2024/07/02 04:05</p>
          </article>
          <article class="news-item">
            <h3>公安要闻</h3>
            <img src="../assets/images/zxxx.png">
            <div>
              <ul>
                <li>
                  <a href="http://www.zgjt.org/article/8382.html">全球公共安全合作论坛（连云港）2024年大会开幕</a>
                </li>
              </ul>
            </div>
            <p>9月9日上午，全球公共安全合作论坛（连云港）2024年大会在江苏省连云港市开幕。
              本届大会以“变局下的合作共赢：打造全球公共安全共同体”为年度主题，邀请122个国家、地区和国际组织的执法部门人士、知名专家学者等共2100余人参会。
              大会由中国友谊促进会主办</p>
            <p style="text-align: right;">2024/09/10 15:19</p>
          </article>
          <article class="news-item">
            <h3>法律法规</h3>
            <img src="../assets/images/qwjd.png">
            <div>
              <ul>
                <li>
                  <a href="http://www.zgjt.org/article/4008.html">权威解读 | 放宽私家车检验周期，你关心的问题在这里！</a>
                </li>
              </ul>
            </div>
            <p>近日，公安部、市场监管总局、生态环境部、交通运输部四部门发布深化车检改革新措施，
              推出了优化私家车检验周期、推进网上预约检验等一系列便民利民措施。新措施受到社会各界和车主们广泛关注和欢迎，
              在此，对大家比较关心的优化私家车检验周期有关问题进行集中答疑。</p>
            <p style="text-align: right;">2022/09/15 13:39</p>
          </article>
        </div>
      </div>
    </section>
    <!--  about-->
    <section id="about">
      <div class="container">
        <h2>联系我们</h2>
        <div style="text-indent: 2em;line-height: 30px;font-size: large">
          <pre>
            合肥车辆管理所:0551-12123         芜湖车辆管理所:0553-12123         蚌埠车辆管理所:0552-12123         淮南车辆管理所:0554-12123
                 马鞍山车辆管理所:0555-2474476     淮北车辆管理所:0561-12123         铜陵车辆管理所:0562-12123         安庆车辆管理所:0556-12123
                 黄山车辆管理所:0559-12123         阜阳车辆管理所:0558-12123         宿州车辆管理所:0557-12123         滁州车辆管理所:0550-12123
                 六安车辆管理所:0564-12123         宣城车辆管理所:0563-12123         池州车辆管理所:0566-12123         亳州车辆管理所:0558-5122620
          </pre>
        </div>
      </div>
    </section>
    <!--footer-->
    <footer>
      <p>&copy;交管对接信息化管理系统</p>
      <div class="social-media">
        <a>吴鸿杰</a>
        <a>何曼伶</a>
        <a>于文涛</a>
        <a>郭世纪</a>
        <a>张子识</a>
      </div>
    </footer>
  </div>
</template>

<style scoped lang="scss">
.el-dropdown *{
  outline: none;
}
.el-dropdown-link{
  font-size: 18px;
  margin-right: 20px;
}
header {
  background: rgb(255, 255, 255);
  color: #ffffff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: slideDown 1s ease-out;
}
.jiaoguan{
  color: #3b6693;
  font-size: 40px;
  align: left;
}
.logo {
  width: 100px;
  height: 160px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

nav a {
  color: #102272;
  background-color: #48D1CC;
  text-decoration: none;
  transition: color 0.3s;
}

nav a:hover {
  color: #ff6347;
}

/*banner部分*/
.banner {
  color: #fff;
  text-align: center;
  padding: 150px 20px;
  animation: fadeIn 2s ease-in;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  animation: fadeIn 1s ease-in;
}

#about {
  padding: 40px 20px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}

/*新闻*/
#news {
  background-color: rgb(244, 244, 244);
}

.news-container {
  display: flex;
  justify-content: space-between;
}

.news-item {
  width: 28%;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.news-item:hover {
  transform: scale(1.05);
}

.news-item img {
  max-width: 100%;
  border-radius: 10px;
}

.news-item h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.news-item p {
  margin-bottom: 10px;
}

.news-item a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}

.news-item a:hover {
  color: #ff6347;
}

/*footer*/
footer {
  background: #202d52;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  animation: slideUp 1s ease-in;
}

.social-media a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s;
}

.social-media a:hover {
  color: #ff6347;
}
/*动画*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


</style>